<template>
  <el-drawer 
    v-model="drawer2" 
    :direction="direction" 
    :width="800"
    :before-close="handleClose"
  >
    <template #header>
      <h4 style="font-size: 16px; font-weight: 600;">手动添加新闻</h4>
    </template>
    <template #default>
      <div class="form-container">
        <!-- 新闻标题 -->
        <div class="form-item">
          <label class="label">
            <span class="required">*</span>
            新闻标题
          </label>
          <el-input 
            v-model="newsForm.title" 
            placeholder="请输入"
            style="width: 100%"
          ></el-input>
        </div>

        <!-- 新闻标签 -->
        <div class="form-item">
          <label class="label">
            <span class="required">*</span>
            新闻标签
          </label>
          <el-select 
            v-model="newsForm.tag" 
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option label="宏观形势" value="宏观形势"></el-option>
            <el-option label="行业动态" value="行业动态"></el-option>
            <el-option label="产业链动态" value="产业链动态"></el-option>
            <el-option label="国际能源观察" value="国际能源观察"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </div>

        <!-- 新闻来源 -->
        <div class="form-item">
          <label class="label">新闻来源</label>
          <el-input 
            v-model="newsForm.source" 
            placeholder="请输入"
            style="width: 100%"
          ></el-input>
        </div>

        <!-- 新闻网址 -->
        <div class="form-item">
          <label class="label">新闻网址</label>
          <el-input 
            v-model="newsForm.url" 
            placeholder="请输入"
            style="width: 100%"
          ></el-input>
        </div>

        <!-- 新闻摘要 -->
        <div class="form-item">
          <label class="label">
            <span class="required">*</span>
            新闻摘要
          </label>
          <el-input 
            v-model="newsForm.summary" 
            type="textarea" 
            :rows="4"
            placeholder="请输入"
            style="width: 100%"
          ></el-input>
          <div class="tips">建议200字以内</div>
        </div>
      </div>
    </template>
    <template #footer>
      <div style="display: flex; justify-content: flex-end; gap: 10px;">
        <el-button @click="cancelClick">取消</el-button>
        <el-button type="primary" @click="confirmClick">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { ElMessageBox } from 'element-plus'
import type { DrawerProps } from 'element-plus'

// 接收 v-model 的值
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => ({})
  }
})

// 发射 v-model 更新事件
const emit = defineEmits(['update:modelValue'])

const drawer2 = ref(false)
const direction = ref<DrawerProps['direction']>('rtl')

// 监听 modelValue 变化，同步到内部 drawer2
watch(() => props.modelValue, (newVal) => {
  drawer2.value = newVal
})

// 监听内部 drawer2 变化，同步到外部
watch(drawer2, (newVal) => {
  emit('update:modelValue', newVal)
})

// 新闻表单数据
const newsForm = ref({
  title: '',
  tag: '',
  source: '',
  url: '',
  summary: ''
})

// 关闭前回调
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('确定要取消添加吗？已输入的内容将丢失')
    .then(() => done())
    .catch(() => {})
}

// 取消按钮
const cancelClick = () => {
  ElMessageBox.confirm('确定要取消添加吗？已输入的内容将丢失')
    .then(() => {
      drawer2.value = false
    })
    .catch(() => {})
}

// 确定按钮 - 提交表单
const confirmClick = () => {
  // 简单验证必填项
  if (!newsForm.value.title || !newsForm.value.tag || !newsForm.value.summary) {
    ElMessageBox.alert('请填写所有必填项（带*的字段）', '提示', {
      confirmButtonText: '确定'
    })
    return
  }
  
  ElMessageBox.confirm('确定要提交这条新闻吗？')
    .then(() => {
      console.log('提交成功', newsForm.value)
      // 提交后清空表单并关闭抽屉
      newsForm.value = {
        title: '',
        tag: '',
        source: '',
        url: '',
        summary: ''
      }
      drawer2.value = false
    })
    .catch(() => {})
}
</script>

<style scoped>
.form-container {
  padding: 20px;
  height: calc(100% - 40px);
  overflow-y: auto;
}

.form-item {
  margin-bottom: 25px;
}

.label {
  display: inline-block;
  width: 100px;
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
}

.required {
  color: #ff4d4f;
  margin-right: 4px;
}

.tips {
  color: #999;
  font-size: 12px;
  margin-top: 5px;
  text-align: right;
}

/* 修复抽屉内部滚动问题 */
:deep(.el-drawer__body) {
  padding: 0;
  overflow: hidden;
}
</style>